<%@ page language="java" contentType="text/html"  pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="${CSS}bootstrap.min.css" />
	<link rel="stylesheet" href="${CSS}font-awesome.min.css"/>	
	<link rel="stylesheet" href="${CSS}ace.min.css" />
	<link rel="stylesheet" href="${CSS}edittag.css" />
	<!--[if !IE]> -->
	<script src="${JS}jquery-2.1.4.min.js"></script>
	<!-- <![endif]-->	
	<!--[if IE]>
	<script src="${JS}jquery-1.11.3.min.js"></script>
	<![endif]-->	
	<script src="${JS}edittag.js"></script>
	<script src="${JS}bootstrap.min.js"></script>
	<script src="${JS}ace-elements.min.js"></script>
	<script src="${JS}ace.min.js"></script>
	<script src="${JS}showtag.js"></script>
</head>
<body style="background:#fff;">
<form name="Editform">
<div class="form-group">
	<label class="control-label" type="text">日期格式：</label>
	<div class="controls">
		<select class="form-control input-medium" name="level">
			<option value="1">1级</option>
			<option value="2">2级</option>
			<option value="3" selected>3级</option>
			<option value="4">4级</option>																
		</select>
	</div>
</div>
<div class="form-group default">
	<label class="control-label" type="text">默认省份：</label>
	<div class="controls">
		<select name="s_province" class="form-control" url="${APP}">
		<option value="0">不选择</option>
		</select>
	</div>
</div>
<div class="form-group default">
	<label class="control-label" type="text">默认地级市：</label>
	<div class="controls">
		<select name="s_city" class="form-control" url="${APP}">
		<option value="0">不选择</option>
		</select>
	</div>
</div>
<div class="form-group default">
	<label class="control-label" type="text">默认区、县级市：</label>
	<div class="controls">
		<select name="s_county" class="form-control" url="${APP}">
		<option value="0">不选择</option>
		</select>
	</div>
</div>
<div class="form-group default" style="display:none;">
	<label class="control-label" type="text">默认镇、乡、街道：</label>
	<div class="controls">
		<select name="s_street" class="form-control" url="${APP}">
		<option value="0">不选择</option>
		</select>
	</div>
</div>
</form>
<div class="form-group">
	<label class="control-label" type="text"></label>
	<div class="controls">
		 <button class="btn btn-sm btn-primary btn-block" onclick="saveEdit();">保存效果</button>
	</div>
</div>
<div id="hidehtml" style="display:none;">
<div class="form-group">
    <label class="col-sm-2 control-label">地址：</label>
	<div class="col-sm-2">
		<select name="s_province" class="form-control" url="${APP}" parent="0" default="0">
		<option value="0">省份</option>
		</select>
	</div>
	<div class="col-sm-2">
	 	<select name="s_city" class="form-control" url="${APP}" parent="" default="0">
	 	<option value="0">地级市</option>
	 	</select>
	</div>
	<div class="col-sm-2">
	 	<select name="s_county" class="form-control" url="${APP}" parent="" default="0">
	 	<option value="0">区、县级市</option>
	 	</select>
	</div>	
	<div class="col-sm-2">
	 	<select name="s_street" class="form-control" url="${APP}" parent="" default="0">
	 	<option value="0">镇、乡、街道</option>
	 	</select>  
	</div>			    
</div>
</div>
<script type="text/javascript">
    $("select[name=level]").change(function(){
    	$(".default").hide();
    	var v=$(this).val();
    	$(".default").each(function(i){
    		if(i<v){$(this).show();}
    	});
    });
    
    getJsonData(0,$("select[name=s_province]")[0],0);
    $("select[name='s_province']").change(function(){
		var id=$(this).val();	
		var e=getNextAreas(this);
		if(e.length>0)getJsonData(id,e,0); 									   
	});
    $("select[name='s_city']").change(function(){
		var id=$(this).val();
		var e=getNextAreas(this);
		if(e.length>0)getJsonData(id,e,0); 
	});
    $("select[name='s_county']").change(function(){
		var id=$(this).val();	
		var e=getNextAreas(this);
		if(e.length>0)getJsonData(id,e,0); 									   
	});	
	
	function saveEdit(){	
	    var modalElement=getEditHtml();
	    var level=$("select[name=level]").val();	
	    var s_province=$("select[name=s_province]").val();	
	    var s_city=$("select[name=s_city]").val();	
	    var s_county=$("select[name=s_county]").val();	
	    var s_street=$("select[name=s_street]").val();	
	    var html=$("#hidehtml").html();
	    getEditWindow().$("#appendHtml").html(html);
	    getEditWindow().$(".form-group .form-control").each(function(i){
	    	//设置默认
	    	if(i==0 && s_province!=0){
	    		$(this).attr("default",s_province);
	    	}
	    	if(i==1 && s_city!=0){
	    		$(this).attr("default",s_city);
	    	}
	    	if(i==2 && s_county!=0){
	    		$(this).attr("default",s_county);
	    	}
	    	if(i==3 && s_street!=0){
	    		$(this).attr("default",s_street);
	    	}  
	    	//设置父地址
	    	if(i==1 && s_province!=0){
	    		$(this).attr("parent",s_province);
	    	}
	    	if(i==2 && s_city!=0){
	    		$(this).attr("parent",s_city);
	    	}
	    	if(i==3 && s_county!=0){
	    		$(this).attr("parent",s_county);
	    	}    	
	    	if(i>=level){
	    		$(this).parent().remove();
	    	}
	    });
	    getEditWindow().form.init("myform");
	}	
	function getNextAreas(element){
		var e=$(element.parentElement.parentElement).next()[0];
		var b=$(e).find("select")[0];
		return b;	
	}
	function getJsonData(id,element,df){	
		var s=$(element).attr("name");
		var url=$(element).attr("url")+"admin/common/areas?id="+id;
		$.ajax({
	        url: url,
	        dataType: 'json',
	        type:'get',
	        async:false,
	        success: function (res) {
	           if(res.length==0){
	        	   return;
	           }
	           var str="";
	           if(s=='s_province'){
	        	   str+="<option value=\"0\">不选择</option>";
	        	   $(getNextAreas(element)).html("<option value=\"0\">不选择</option>"); 
	        	   $(getNextAreas(getNextAreas(element))).html("<option value=\"0\">不选择</option>"); 
	        	   $(getNextAreas(getNextAreas(getNextAreas(element)))).html("<option value=\"0\">不选择</option>");
	           }
	           if(s=='s_city'){
	        	   str+="<option value=\"0\">不选择</option>";
	        	   $(getNextAreas(element)).html("<option value=\"0\">不选择</option>"); 
	        	   $(getNextAreas(getNextAreas(element))).html("<option value=\"0\">不选择</option>");
	           }
			   if(s=='s_county'){
				   str+="<option value=\"0\">不选择</option>";
				   $(getNextAreas(element)).html("<option value=\"0\">不选择</option>");
	           }
			   if(s=='s_street'){
				   str+="<option value=\"0\">不选择</option>";
	           }
	           for(var i=0;i<res.length;i++){
	        	   if(df && res[i].id==df){
	        		   str+="<option selected value=\""+res[i].id+"\">"+res[i].name+"</option>";
	        	   }else{
	        		   str+="<option value=\""+res[i].id+"\">"+res[i].name+"</option>";
	        	   }       	  		        	
	           }
	           $(element).html(str);
	        }
	    });	
	}
</script>
</body>
</html>
